<template>
  <div class="content2">
    <div class="c2-left">
      <div class="c2-left-title">
        <img
          v-if="item.type === 'tpu'"
          class="c2-left-pu"
          src="@/assets/img/main/tpu.png"
          alt=""
        />
        <img v-else class="c2-left-pu" src="@/assets/img/main/cpu.png" alt="" />
        <span>{{ item.type.toUpperCase() }}使用率:</span>
      </div>
      <div class="c2-l-echart6">
        <v-chart autoresize :option="stateData.option6"></v-chart>
      </div>
    </div>
    <div class="c2-right">
      <div class="r-top">
        <div class="r-top-title">
          <span>{{ item.type.toUpperCase() }}内存使用率:</span>
          <span>
            <span class="num">{{ item.usageRate }}</span>
            <span class="symbol">%</span>
          </span>
        </div>
        <div class="c2-r-echart7">
          <v-chart autoresize :option="stateData.option7"></v-chart>
        </div>
      </div>
      <div class="r-bottom">
        <div class="r-bottom-title">
          <span>存储空间:&nbsp;</span>
          <span>
            <span class="num">{{ item.storageProportion }}</span>
            <span class="symbol">%</span>
          </span>
        </div>
        <div class="r-b-echart5">
          <v-chart autoresize :option="stateData.option5"></v-chart>
        </div>
        <div class="r-b-tip">
          <span class="tip-name">已用存储/全部：</span>
          <span
            >{{ item.storageSpace }}/{{ item.allSpaces }}
            {{ item.storageUnit }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Home from '@/Hooks/Home'
import { defineProps } from 'vue'
const { state } = Home()
const props = defineProps({
  item: Object,
})
let stateData = reactive(state)
stateData.option6.series[0].data = [(props.item.sphericalBody * 1) / 100]
stateData.option7.series[1].data[0].value = props.item.usageRate
stateData.option5.series[0].data = [props.item.storageSpace]
stateData.option5.series[1].data = [props.item.allSpaces]
</script>

<style lang="scss">
.content2 {
  margin-top: 0.08rem;
  width: 100%;
  height: calc(100% - 0.4rem);
  display: flex;
  justify-content: space-between;

  .c2-left {
    width: 54%;
    height: 100%;
    background: url('@/assets/img/main/sb-big.png') no-repeat;
    background-size: 100% 100%;
    .c2-left-title {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      display: flex;
      font-size: 0.18rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .c2-l-echart6 {
      width: 100%;
      height: calc(100% - 0.4rem);
    }
  }
  .c2-right {
    width: 44%;
    height: 100%;
    .r-top {
      width: 100%;
      height: 60%;
      background: url('@/assets/img/main/sb-zhong.png') no-repeat;
      background-size: 100% 100%;
      .r-top-title {
        display: flex;
        justify-content: space-between;
        font-size: 0.16rem;
        padding: 0.02rem 0.1rem 0 0.16rem;
        .num {
          display: inline-block;
          margin-top: 0.05rem;
          font-size: 0.25rem;
        }
        .symbol {
          font-size: 0.1rem;
        }
      }
      .c2-r-echart7 {
        width: 100%;
        height: calc(100% - 0.4rem);
      }
    }
    .r-bottom {
      width: 100%;
      height: 35%;
      margin-top: 5%;
      background: url('@/assets/img/main/sb-small.png') no-repeat;
      background-size: 100% 100%;
      .r-bottom-title {
        font-size: 0.16rem;
        padding: 0.02rem 0.16rem 0;
        display: flex;
        justify-content: flex-start;
        .num {
          display: inline-block;
          margin-top: 0.02rem;
          font-size: 0.22rem;
        }
        .symbol {
          font-size: 0.1rem;
        }
      }
      .r-b-echart5 {
        width: 100%;
        height: 33%;
      }
      .r-b-tip {
        text-align: end;
        margin-right: 0.16rem;
        font-size: 0.1rem;
        .tip-name {
          font-size: 0.1rem;
          color: #227acd;
        }
      }
    }
  }
}
</style>
